<template>
	<view class="u-attr">
		<view @click="turnOn">
			<slot name="btn"></slot>
		</view>
		<u-popup v-model="newValue" mode="bottom" border-radius="14" :safeAreaInsetBottom="true" @close="close">

		    <!-- #ifdef MP-TOUTIAO -->
		    <view class="u-model">
		    <!-- #endif -->
		    <!-- #ifndef MP-TOUTIAO -->
		    <view class="u-model" @touchmove.stop.prevent>
		    <!-- #endif -->
				<view class="u-top dir-left-nowrap u-border-box">
					<view class="u-pic u-border-box" @click="clickImg">
						<image class="u-img" :src="picUrl ? picUrl : goods.cover_pic"></image>
					</view>
					<view class="u-info">
						<view class="cross-center dir-left-nowrap" :style="{'color': theme.color,'height': '30rpx','margin-bottom': '4rpx'}">
							<view class="dir-left-nowrap cross-center">
								<slot name="priceBefore"></slot>
								<view class="u-price">
									<app-price
										v-if="is_show_price"
										type="hump"
										:theme="theme"
										:sign="sign"
										:price="sellPrice"
										:default-price="goods.price"
									></app-price>
								</view>
							</view>
							<app-member-mark
								v-if="goods.level_show === 1"
								width="80rpx"
								:height="30"
								mode="new"
								:theme="theme"
							></app-member-mark>
						</view>
						<view v-if="goods.type !== 'form-goods' || !dataConfig.is_alone == 0" class="u-stock">库存：{{stock}}</view>
					</view>
					<view class="u-close-image" @click="close">
						<image class="bd-close-image u-border-box" src="/static/image/icon/icon-close.png" ></image>
					</view>
				</view>
				<view class="u-center">
					<scroll-view class="u-scroll-view" scroll-y="true">
						<slot name="extra"></slot>
						<view v-if="goods.type === 'goods' || goods.type === 'form-goods'" class="u-attr-group u-border-box" v-for="(item, index) in newGroup" :key="index">
							<view class="u-group-name u-text">{{item.attr_group_name}}</view>
							<view class="dir-left-wrap" >
								<view :class="['u-group-item', attr.select ? 'u-checked' : 'u-unchecked', attr.num_0 ? 'u-attr_num_0' : '', index == 0 && showAttrImg ? 'attr-pic-item' : '']"
									  :style="{'background-color': attr.select ? theme.background_o : '#F6F6F6','color': attr.select ? theme.color : '','border-color': attr.select ? theme.border : 'transparent'}"
									  @click="storeAttr(attr.attr_id, item.attr_group_id, attr.num_0, index == 0 ? key : '-1', attr.select)"
									  v-for="(attr, key) in item.attr_list" :key="key">
									<image mode="aspectFill" class="attr-cover-img" v-if="index == 0 && showAttrImg" :src="attr.pic_url ? attr.pic_url : goods.cover_pic"></image>
									<image class="cover-btn" @click.stop="previewCover(key,attr.select)" v-if="index == 0 && showAttrImg" src="/static/image/icon/cover.png"></image>
									<view>{{attr.attr_name}}</view>
								</view>
							</view>
						</view>
                        <view v-if="goods && goods.type === 'form-goods' && dataConfig.form_mode_type === 'calendar'" class="u-attr-group u-border-box" style="margin-right: 24rpx">
                                <view class="u-group-name u-text">预约时间</view>
                                <view class="u-group-name u-select dir-left-nowrap cross-center"
                                      v-if="dataConfig.is_alone == 0">
                                    <view class="box-grow-0">已选</view>
                                    <view class="box-grow-1" style="margin-left: 33rpx">{{ date | formatDate }}</view>
                                    <view class="box-grow-0" v-if="date.data.length">
                                        共{{ dataConfig.has_kuatian == 1 ? date.data.length - 1 : date.data.length }}{{ dataConfig.place_unit }}
                                    </view>
                                </view>
                                <view class="dir-left-wrap">
                                    <scroll-view scroll-x style="width:100%;border-bottom: 1px solid rgba(0, 0, 0, 0.1)">
                                        <view class="dir-left-nowrap cross-center year-text">
                                            <view :key="index" @click="changeMonth(item)" class="main-center box-grow-0"
                                                  :style="{borderBottomColor: nowDate.year == item.year && nowDate.month == item.month ? theme.color: 'rgba(0,0,0,0)'}"
                                                  v-for="(item,index) of weekList"
                                            >
                                                {{ item.text }}
                                            </view>
                                        </view>
                                    </scroll-view>
                                </view>
                                <view class="calendar dir-top-nowrap">
                                    <view class="dir-left-nowrap">
                                        <view class="calendar-week box-grow-1 cross-center main-center" :key="index"
                                              v-for="(week,index) of ['日','一','二','三','四','五','六']">{{ week }}
                                        </view>
                                    </view>
                                </view>
                                <view class="dir-top-nowrap">
                                    <view v-for="(row,line) in formatWeeks" :key="line" class="dir-left-nowrap">
                                        <view v-if="day && day.year == nowDate.year && day.month == nowDate.month"
                                              class="calendar-day box-grow-1 cross-center main-center dir-top-nowrap"
                                              @click="choiceDate(day)"
                                              :style="[day.ss]"
                                              v-for="(day,column) in row" :key="column">
                                            <view :style="day.text_color">{{day.top_content}}</view>
                                            <view style="font-size: 24rpx;padding:15rpx 0;"> {{ day.date }}</view>
                                            <view :style="{color: day.disable ? '#cccccc': theme.color}">{{day.end_content}}</view>
                                        </view>
                                        <view v-else class="calendar-day box-grow-1"></view>
                                    </view>
                                </view>
                            </view>
                        <view>
                          <slot name="afterList"></slot>
                        </view>
                        <view v-if="is_choose_number" class="u-number dir-left-nowrap main-between cross-center">
							<view class="u-text" style="color: #333333;font-weight: 600">数量</view>
							<view class="dir-left-nowrap u-input-box">
								<view @click.stop="numberSub" :class="[number <= min_number ? 'u-reduced-1' : 'u-reduced-0', 'u-number-btn']"></view>
								<input @blur="numberBlur" type="number" class="u-input" v-model="number">
								<view @click.stop="numberAdd" class="u-number-btn u-added-1"></view>
							</view>
						</view>
                        <slot name="afterNumber"></slot>
					</scroll-view>
				</view>
				<view>
					<app-sell-tip :time="sell_time" @changeTime="changeTime"></app-sell-tip>
				</view>
                <template v-if="goods.type === 'form-goods' &&  dataConfig.customization_status == 1">
                    <view class="u-bottom dir-left-nowrap" >
                        <view
                            class="box-grow-1 u-btn u-btn-color"
                            @click="handleNext"
                            :style="{'background': theme.background_gradient_btn}"
                        >
                            <template>下一步</template>
                        </view>
                    </view>
                </template>
                <app-jump-button v-else form>
                    <view class="u-bottom dir-left-nowrap">
                        <view
                            v-if="is_show_left && (goods.type === 'goods' || is_must_left)"
                            class="box-grow-1"
                            :style="{'color': theme.secondary_text,'background': theme.background_s_gradient_btn}"
                            :class="['u-btn', is_show_right ? 'bd-btn-left' : '']"
                            @click="leftSubmit">
                            <slot name="left_slot"></slot>
                            <template v-if="!$slots.left_slot">{{leftText}}</template>
                        </view>
                        <template v-if="(sign == '' || sign == 'mch') && sell_time > 0">
                            <view
                                v-if="isTip == 1"
                                class="box-grow-1"
                                @click="rightTip"
                                :style="{'background': !$slots.right_slot ? theme.background_gradient_btn : ''}"
                                :class="[!$slots.right_slot ? ' u-btn u-btn-color' : '', !(is_show_left && (goods.type === 'goods' || is_must_left)) ? '' : ' bd-btn-right']"
                            >
                                {{rightRemindText}}
                            </view>
                        </template>
                        <template v-else>
                            <view
                                v-if="is_show_right"
                                class="box-grow-1"
                                @click="rightSubmit"
                                :style="{'background': !$slots.right_slot ? theme.background_gradient_btn : ''}"
                                :class="[!$slots.right_slot ? ' u-btn u-btn-color' : '', !(is_show_left && (goods.type === 'goods' || is_must_left)) ? '' : ' bd-btn-right']"
                            >
                                <slot name="right_slot"></slot>
                                <template v-if="!$slots.right_slot">{{rightText}}</template>
                            </view>
                            <template v-if="$slots.right">
                                <slot name="right"></slot>
                            </template>
                        </template>
                    </view>
                </app-jump-button>
			</view>
		</u-popup>
		<app-preview-image v-if="showPreview" :cover_list="cover_list" :index="attrIndex" @change="closePreview"></app-preview-image>
	</view>
</template>

<script>
	import appPreviewImage from '../../basic-component/app-preview-image/app-preview-image.vue';
	import uPopup from '../../basic-component/u-popup/u-popup.vue';
	import appPrice from "../goods/app-price.vue";
	import appMemberMark from "../app-member-mark/app-member-mark.vue";
	import {mapGetters, mapState} from "vuex";
	import appSellTip from './app-sell-tip.vue';
	import goodsMixin from '@/core/goods-mixin.js';
    import calendarCommon from "@/pages/goods/calendar";

	export default {
		name: "u-attr",
		mixins: [goodsMixin,calendarCommon],
		props: {
			value: {
				type: [Boolean, Number]
			},
			goods: {
				type: Object,
				default: function() {
					return {}
				},
				required: true
			},
			theme: {
				type: Object
			},
			checked: {
				type: Object
			},
			week_number: {
				type: [String, Number]
			},
			is_show_price: {
				type: Boolean,
				default: true
			},
			is_show_left: {
				type: Boolean,
				default: true
			},
			is_must_left: {
				type: Boolean,
				default: false
			},
			is_show_right: {
				type: Boolean,
				default: true
			},
			is_choose_number: {
				type: Boolean,
				default: true,
			},
			leftText: {
				type: String,
				default: '加入购物车'
			},
			rightText: {
				type: String,
				default: '立即购买'
			},
			leftFunc: {
				type: Boolean
			},
			autoClose: {
				type: Boolean,
				default: true
			},
			rightFunc: {
				type: Boolean
			},
			sign: {
				type: String
			},
			again: {
				type: Number
			},
			attentionSign : {
				type: String
			},
            //是否多选初始化
            isMore: {
                type: Boolean,
                default: false
            },
		},
		data() {
			return {
				newValue: false,
				picUrl: null,
				newGroup: [],
				showAttrImg: false,
				number: 1,
				sell_time: 0,
				showPreview: false,
				cover_list: [],
				attrIndex: 0,
				min_number: 1,
			}
		},
		created() {
            if(!this.isMore){
                this.min_number = !isNaN(this.goods.min_number) && this.goods.min_number > 0 ? this.goods.min_number : 1;
                this.number = this.min_number;
                this.createCalendar();
            }
		},
		methods: {
			closePreview(index) {
				console.log(index,this.attrIndex)
                if(index != this.attrIndex) {
					let item = this.newGroup[0]
					let attr = item.attr_list[index];
					this.storeAttr(attr.attr_id, item.attr_group_id, attr.num_0, index);
				}
				// this.attrIndex = index;
				this.showPreview = false;
			},
			previewCover(index,status) {
				console.log(index,this.attrIndex)
                if(!status) {
					let item = this.newGroup[0]
					let attr = item.attr_list[index];
					this.storeAttr(attr.attr_id, item.attr_group_id, attr.num_0, index);
				}
				// this.attrIndex = index;
				this.showPreview = true;
			},
			close: function() {
                this.newGroup.forEach(_ => {
                    _.attr_list.forEach(__ => {
                    //    __.select = false;
                    })
                })
				this.$emit('input', false);
			},
			turnOn: function() {
				this.$emit('input', true);
			},
			inArray: function(newVal, arr) {
				return arr.some(v => {
					return newVal === v;
				});
			},
			identifier: function(copyGroup, attrNum_0, select) {
				copyGroup.forEach(f => {
					f.attr_list.forEach(c => {
						let param = `${f.attr_group_id}-${c.attr_id}`;
						this.inArray(param, attrNum_0) && !this.inArray(param, select) ? c.num_0 = true : c.num_0 = false;
					});
				});
			},
			selectCheck: function(copyAttr, attrNum_0, select) {
				copyAttr.forEach(f => {
					let arr = [];
					let sign = 0;
					f.attr_list.forEach(c => {
						let param = `${c.attr_group_id}-${c.attr_id}`;
						if (!this.inArray(param, select)) {
							sign += 1;
							arr.push(param);
						}
					});
					if (f.stock === 0 && sign <= 1) Array.prototype.push.apply(attrNum_0, arr);
					if (sign === 0) {
                        this.upCalendar(f);
                        if(this.checked && this.goods.type === 'form-goods' && this.isSelect()){
                            f.stock = this.checked.stock;
                            f.price = this.checked.price;
                            f.calc_price = this.checked.price;
                            f.price_member = this.checked.price;
                        }
                        this.$emit('check',{item: f, number: this.number});
					}
				});
			},
			storeAttr: function(attr_id, group_id, num_0, index, status) {
                if (status == true && this.goods.type === 'form-goods') return;

				if (num_0 === true) return;
				if(index > -1) {
					this.attrIndex = index;
				}
				let newGroup = this.newGroup;
				let copyAttr = this.copyAttr;
				let select = [];
				newGroup.forEach((i, index) => {
					let attr_list = i.attr_list;
					attr_list.forEach((k) => {
						if (i.attr_group_id === group_id) {
							if (k.attr_id === attr_id) {
								if (k.select === true) {
									k.select = false;
								} else {
									k.select = true;
								}
							} else {
								k.select = false;
							}
							// k.attr_id === attr_id ? k.select = true : k.select = false;
						}
						if (k.select === true) {
							select.push(`${i.attr_group_id}-${k.attr_id}`);
							if (index === 0) this.picUrl = k.pic_url;
						}
					});
				});
				let attrNum_0 = [];
				this.selectCheck(copyAttr, attrNum_0, select);
				this.$nextTick(() => {
					if (this.number > this.stock) this.number = this.stock;
				});
				this.identifier(newGroup, attrNum_0, select);
				if (select.length !== newGroup.length) {
                    this.$emit('check', {
						item: null,
					});
                    this.upCalendar(null);
				}
			},
			firstSelect: function() {
				if (!this.copyGroup || !this.copyAttr) return;
				let copyGroup = this.copyGroup;
				let copyAttr = this.copyAttr;
				let groupLength = copyGroup.length;
				let select = [];
                console.log(copyAttr,copyGroup,3333);
				copyAttr.forEach(i => {
					let attr_list = i.attr_list;
					attr_list.forEach(j => {
						let attr_group_id = j.attr_group_id;
                        for(let kk = 0; kk < copyGroup.length; kk++){
                            let k = copyGroup[kk];
							if (attr_group_id === k.attr_group_id) {
								let groups_attr_list = k.attr_list;
                                if(groups_attr_list.length > 1){
                                    continue;
                                }
								groups_attr_list.forEach((g,g_index) => {
									if (g.attr_id === j.attr_id) {
										if (i.stock > 0) {
											if (groupLength > 0) {
												g.select = true;
												select.push(`${k.attr_group_id}-${g.attr_id}`);
												if (groupLength === copyGroup.length) {
													this.picUrl = g.pic_url;
												}
												groupLength--;
											}
										}
									}
								});
							}
						};
					});
				});
				let attrNum_0 = [];
				this.selectCheck(copyAttr, attrNum_0, select);
				this.identifier(copyGroup, attrNum_0, select);
				this.newGroup = copyGroup;
			},
			numberBlur: function (e) {
				let value = parseInt(e.detail.value);
				if (!value) value = 1;
				let stock = this.stock;
				if(this.sign == 'weekly_buy' && this.week_number > 0) {
					stock = Math.floor(+this.stock / +this.week_number);
					console.log(stock)
				}
				if (value > stock) {
					value = stock;
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
				}
				this.number = value;
			},
			numberSub:function() {
				let value = this.number;
				if (value > this.min_number) {
					value--;
					this.number = value;
				}
			},
			numberAdd: function() {
				let value = this.number;
				let stock = this.stock;
				if(this.sign == 'weekly_buy' && this.week_number > 0) {
					stock = Math.floor(+this.stock / +this.week_number);
					console.log(stock)
				}
				value++;
				if (value > stock) {
					value = stock;
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
				}
				if (!this.checkLimitBuy(value)) {
					value = this.goods.limit_buy.rest_number;
				}
				this.number = value;
			},
			leftSubmit:function() {
				if (this.leftFunc === true) {
					this.$emit('leftFunc', this.number);
				} else {
					this.cart();
				}
				this.close();
			},
			rightSubmit:function() {
				if (!this.checked) {
					uni.showToast({
						title: '请先选规格',
						icon: 'none'
					});
					return false;
				}
				if (!this.$user.isLogin()) {
					return this.$user.getInfo();
				}
				let attrs = [];

				this.checked.attr_list.forEach(item => {
					attrs.push({
						attr_id: item.attr_id,
						attr_group_id: item.attr_group_id
					});
				});
				let goods = {
					mch_id: this.goods.mch_id ? this.goods.mch_id : 0,
					goods_list: [
						{
							id: this.goods.id,
							attrs,
							num: this.number,
							cat_id: 0,
							goods_attr_id: this.checked.id
						}
					]
				}
				if (!this.checkMinNUmber()) {
					return ;
				}
				if (!this.checkLimitBuy(this.number)) {
					return ;
				}
				if (this.rightFunc === true) {
					this.$emit('rightFunc', goods);
					if(!this.autoClose) {
						return false;
					}
                    this.close();
                } else {
					this.shop(goods);
				}
			},
			shop: function(goods) {
			    if(this.goods.type === 'form-goods' && this.dataConfig.form_mode_type === 'calendar'){
                    if (!this.isSelect()) {
                        uni.showToast({title: '请选择日历信息', icon: 'none'});
                        return;
                    }
                    const date = this.handleParam();
                    Object.assign(goods, {date:JSON.stringify(date),stock: this.number})
                    uni.navigateTo({
                        url: `/pages/order-submit/order-submit?&date=${date}&preview_url=${encodeURIComponent(this.$api.order.form_order_preview)}&submit_url=${encodeURIComponent(this.$api.order.form_order_submit)}&mch_list=${JSON.stringify([goods])}`
                    });
                    this.close();
			        return;
                }
                uni.navigateTo({
                    url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify([goods])}`
                });
                this.close();
			},
			cart: function() {
				if (!this.checked) {
					uni.showToast({
						title: '请先选规格',
						icon: 'none'
					});
					return false;
				}
				if (this.goods.type === 'ecard') return;
				let number = this.number;
				this.$request({
					url: this.$api.cart.add,
					method: 'post',
					data: {
						goods_id: this.checked.goods_id,
						attr: this.checked.id,
						num: this.number
					}
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.getNumber();
						this.$emit('cart',{checked:this.checked, number:number});
						this.close();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2500
						});
					}
				});
			},
            getNumber() {
                this.$request({
                    url: this.$api.cart.nums,
                }).then(response => {
                    if (response.code === 0) {
                        this.$store.commit('user/cart_nums', response.data.nums);
                    }
                }).catch(e => {
                });
            },
			clickImg() {
				if(this.picUrl) {
					this.previewCover(this.attrIndex,true)
				}else {
					// #ifdef MP
					uni.previewImage({
						current: 0,
						urls: [this.goods.cover_pic]
					});
					// #endif
					// #ifdef H5
					this.$jwx.previewImage({
						current: this.goods.cover_pic,
						urls: [this.goods.cover_pic]
					});
					// #endif
				}
			},
			checkMinNUmber() {
				if (this.goods.min_number > this.number) {
					this.$tips.showToast({
						title: '该商品' + this.goods.min_number + this.goods.unit + '起售',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			checkLimitBuy(value) {
				if (typeof this.goods.limit_buy !== 'undefined' && this.goods.limit_buy.status == 1 && this.goods.limit_buy.rest_number < value) {
					this.$tips.showToast({
						title: this.goods.limit_buy.text,
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			changeTime(time) {
				this.sell_time = time;
			}
		},
		components: {
			uPopup,
			appPrice,
			appMemberMark,
			appSellTip,
			appPreviewImage
		},
		computed: {
			stock: function() {
				if (!this.$validation.isEmpty(this.checked)) {
					return this.checked.stock;
				} else if (!this.$validation.isEmpty(this.goods)) {
					return this.goods.goods_num;
				}
			},
			sellPrice: function() {
				if (!this.$validation.isEmpty(this.checked)) {
					return this.goods.level_show === 1 ? this.checked.price_member : this.checked.price;
				} else if (!this.$validation.isEmpty(this.goods)) {
					return this.goods.hasOwnProperty('price_min') ? this.goods.price_min : this.goods.price;
				}
			},
			copyGroup: function() {
				if (!this.goods) return;
				let group = this.$utils.deepClone(this.goods.attr_groups);
				for (let i = 0; i < group.length; i++) {
					group[i].attr_list.forEach(item => {
						item.select = false;
						item.num_0 = false;
					});
				}
				return group;
			},
			copyAttr: function() {
				if (!this.goods) return;
				return this.$utils.deepClone(this.goods.attr);
			},
			...mapGetters({
				userInfo: 'user/info',
			}),
			...mapState({
				isTip: state => state.mallConfig.mall.setting.is_remind_sell_time
			}),
			remindParams() {
				return {
					sell_time: this.sell_time,
					goods_id: this.goods.id,
					template_message_list: this.goods.template_message_list,
					buy_text: this.rightText
				};
			},
		},
		watch: {
			value: {
				handler(newVal) {
                    if(newVal && this.isMore){
                        this.min_number = !isNaN(this.goods.min_number) && this.goods.min_number > 0 ? this.goods.min_number : 1;
                        this.number = this.min_number;
                        this.createCalendar();
                        this.firstSelect();
                    }

					this.newValue = newVal;
					if (newVal === false) {
						this.cover_list = [];
                    	this.showAttrImg = false;
					  	this.number = this.min_number;
					  	return;
					}
					this.cover_list = [];
                    this.showAttrImg = false;
		            for(let attr of this.goods.attr_groups[0].attr_list) {
		                this.cover_list.push({
		                	pic_url: attr.pic_url ? attr.pic_url : this.goods.cover_pic,
		                	name: attr.attr_name
		                })
		                if(attr.pic_url) {
		                    this.showAttrImg = true;
		                }
		            }
					this.sell_time = this.goods.sell_time;
					if (this.$validation.isEmpty(this.checked)) this.$utils.throttle(this.firstSelect, 800);
				},
				immediate: true
			},
			number: {
				handler(newVal) {
					this.$emit('check', {
						item: this.checked,
                        number: this.number,
					});
                    this.upCalendar(this.checked);
				}
			},
			again: {
				handler() {
					this.firstSelect();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.u-bottom {
    height: 110upx;
    width: 750upx;
    padding: 20upx 24upx;
    border-top: 1upx solid rgba(0,0,0,.1);
}
.u-btn {
    text-align: center;
    line-height: 70upx;
    border-radius: 35upx;
    font-size: 26upx;
    width: calc(50% - 10upx);
}
.u-btn-color {
    color: #ffffff;
}

.u-attr-group {
    margin: 24#{upx};
    margin-bottom: 0;
    margin-right: 0;
}

.u-group-name {
    margin-bottom: 20#{upx};
    font-weight: 600;
    color: #333333;
}

.u-text {
    font-size: 24#{upx};
    color: #666666;
}

.u-select {
    width: 100%;
    height: 64#{upx};
    background: #F6F6F6;
    font-size: 24#{upx};
    padding: 0 20#{upx} 0 22#{upx};
    border-radius: 8#{upx};
}

.year-text {
    font-size: 24#{upx};

    > view {
        width: 64#{upx};
        padding-bottom: 4#{upx};
        //padding: 0 13upx;
        margin-right: 37#{upx};
        border-bottom-width: 6#{upx};
        border-bottom-style: solid;
        border-bottom-color: #ff4544;
    }
}

.calendar {
    .calendar-week {
        font-size: 24#{upx};
        color: #333333;
        height: 80#{upx};
    }
}

.calendar-day {
    width: 102#{upx};
    height: 141#{upx};
    background: white;
    margin-left: 0#{rpx};
    margin-right: 0#{rpx};
    margin-bottom: 10#{rpx};
}

.goods-composition {
    width: 702#{upx};
    margin: 20#{upx} 20#{upx} 0 20#{upx};
    padding: 20#{rpx};
    background-color: #fff;
    border-radius: 15#{upx};

    .goods-composition-title {
        font-size: 28#{rpx};
        color: #353535;
        margin-bottom: 20#{rpx};
    }

    .goods-composition-swiper {
        height: 194#{rpx};
    }

    .goods-composition-more {
        margin: 20#{rpx} auto 4#{rpx} auto;
        width: 226#{rpx};
        padding: 0 24#{rpx};
        height: 56#{rpx};
        line-height: 54#{rpx};
        border-radius: 28#{rpx};
        border: 2#{rpx} solid #bbbbbb;
        font-size: 24#{rpx};
        color: #999999;

        image {
            width: #{12rpx};
            height: #{22rpx};
        }
    }
}
	.u-model {
		width: 750upx;
	}
	.u-top {
		margin: 0 24upx;
		border-bottom: 1upx solid rgba(0,0,0,.1);
		height: 115upx;
	}
	.u-close-image {
		width: 54upx;
		height: 78upx;
		padding: 24upx 0 24rpx 104rpx;
		margin-left: 24rpx;
	}
	.bd-close-image {
		width: 30upx;
		height: 30upx;
	}
	.u-pic {
		width: 128rpx;
		height: 128rpx;
		padding: 4upx;
		border-radius: 8rpx;
		position: relative;
		top: -34upx;
		background-color: #ffffff;
	}
	.u-img {
		width: 120rpx;
		height: 120rpx;
		background-color: #ffffff;
	}
	.u-info {
		width: 424upx;
		height: 136upx;
		padding: 30upx 0 0 24upx;
	}
	.u-scroll-view {
		width: 100%;
		max-height: calc(80vh - 154upx);
	}
	.u-attr-group {
		margin: 24upx;
		margin-bottom: 0;
		margin-right: 0;
	}
	.u-number {
		height: 124upx;
		margin: 0 32upx;
	}
	.u-group-name {
		margin-bottom: 20upx;
		font-weight: 600;
		color: #333333;
	}
	.u-group-item {
		padding: 15upx 24upx;
		border-radius: 10upx;
		margin:0 20upx 20upx 0;
		font-size: 24upx;
		border: 2upx solid transparent;
		&.attr-pic-item {
			padding: 0;
			position: relative;
            max-width: 222rpx;
			.attr-cover-img {
				width: 218rpx;
				height: 218rpx;
				border-radius: 6rpx;
			}
			.cover-btn {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				width: 36rpx;
				height: 36rpx;
			}
			view {
				padding: 15upx 24upx;
				text-align: center;
			}
		}
	}
	.u-checked {
		color: #ffffff;
	}
	.u-unchecked {
		background-color: #f2f2f2;
		color: #353535;
	}
	.u-attr_num_0 {
		background-color: #f7f7f7;
		color: #cdcdcd;
	}
	.u-stock {
		font-size: 24upx;
		color: #999999;
	}
	.u-price {
		margin-right: 12upx;
	}
	.u-input {
		width: 88upx;
		height: 60upx;
		min-height: 62upx;
		background-color: #f7f7f7;
		font-size: 20upx;
		color: #353535;
		text-align: center;
		padding: 0;
	}
	.u-input-box {
		width: 218upx;
	}
	.u-number-btn {
		height: 62upx;
		width: 60upx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
	}
	.u-number-btn:first-child {
		margin-right: 5upx;
	}
	.u-number-btn:last-child {
		margin-left: 5upx;
	}
	.u-reduced-1 {
		background-image: url("../../../static/image/icon/can-be-reduced.png");
	}
	.u-reduced-0 {
		background-image: url("../../../static/image/cart/can-be-reduced.png");
	}
	.u-added-1 {
		background-image: url("../../../static/image/cart/can-be-added.png");
	}
	.u-text {
		font-size: 24upx;
		color: #666666;
	}
	.u-bottom {
		height: 110upx;
		width: 750upx;
		padding: 20upx 24upx;
		border-top: 1upx solid rgba(0,0,0,.1);
	}
	.u-btn {
		text-align: center;
		line-height: 70upx;
		border-radius: 35upx;
		font-size: 26upx;
		width: calc(50% - 10upx);
	}
	.bd-btn-left {
		margin-right:10upx;
		/*border-top-right-radius: 0;*/
		/*border-bottom-right-radius: 0;*/
	}
	.bd-btn-right {
		margin-left: 10upx;
		/*border-top-left-radius: 0;*/
		/*border-bottom-left-radius: 0;*/
	}
	.u-btn-color {
		color: #ffffff;
	}
</style>